import $ from './library/jquery.js';
import cookie from './library/cookie.js';

let shop = cookie.get('shop');

if (shop) {
    shop = JSON.parse(shop);

    let idList = shop.map(el => el.id).join();

    $.ajax({
        type: "get",
        url: "../interface/getItems.php",
        data: { idList: idList },
        dataType: "json",
        success: function(res) {
            let temp = '';

            res.forEach(elm => {
                let picture = JSON.parse(elm.picture);

                // 让ajax请求到的数据结果中遍历后的id与cookie中数据的id 相同
                let current = shop.filter(val => val.id == elm.id);

                temp += `<div class="good_c">
                <div class="xuanze">
                <input type="checkbox" class="ck" />
                </div>
                <div class="tu">
                <img src="./${picture[0].src}" alt="" />
                </div>
                <div class="name_c">${elm.title}</div>
                <div class="price_c">${parseFloat(elm.price).toFixed(2)}</div>
                <div class="num_c">
                    <div>
                        <p class="reduce" data-id="${elm.id}">-</p>
                        <input type="text" class="itxt" value="${current[0].num}">
                        <p class="add" data-id="${elm.id}">+</p>
                    </div>
              </div>
              <div class="sum_c">${(elm.price * current[0].num).toFixed(2)}</div>
              <div class="caozuo_c" data-id="${elm.id}"><a href="">x</a></div>
            </div>`;

            });
            $('.good').append(temp).find('.caozuo_c').on('click', function() {
                let res = shop.filter(el => el.id != $(this).attr('data-id'));
                cookie.set('shop', JSON.stringify(res), 1);
                location.reload();
            });
            $('.good').find('.reduce').on('click', function() {
                
                let index= shop.findIndex(el => el.id == $(this).attr('data-id'));
                // console.log(index);
                if(shop[index].num>0){
                    shop[index].num--;
                    $(this).siblings('.itxt').val(shop[index].num);
                    $(this).parent().parent().siblings('.sum_c').text((shop[index].num)*(shop[index].price));
                    cookie.set('shop', JSON.stringify(shop), 1);
                    // console.log(shop[index].num);
                }
            });

            $('.good').find('.add').on('click', function() {
                
                let index= shop.findIndex(el => el.id == $(this).attr('data-id'));
                // console.log(index);
                    shop[index].num++;
                    $(this).siblings('.itxt').val(shop[index].num);
                    $(this).parent().parent().siblings('.sum_c').text((shop[index].num)*(shop[index].price));
                    cookie.set('shop', JSON.stringify(shop), 1);
                    // console.log(shop[index].num);
            });
            // $('.good').find('.reduce').on('click', function() {
            //     current[0].num++;
            // });
        }
    });
}